<template>
	<page-meta><navigation-bar title="筛选" front-color="#000000" background-color="#ffffff" /></page-meta>
	<view>
		<view style="position: fixed;z-index: 10;top: 0px;left: 0;width: 100%;padding: 0 10px;background: #fff;">
			<uni-search-bar cancelButton="none" clearButton="auto" @confirm="" @input="cahgnw" radius="80" style="width: 80%;float: left;box-sizing: border-box;" />
			<text type="default" @tap="open" style="font-weight: 600; float: left;width: calc(20% - 20px);display: block;text-align: center;line-height: 50px;color: #52aaf1;">筛选</text>
		</view>
		<view class="border-bt border-tp" style="position: fixed;z-index: 10;top: 50px;left: 0;width: calc(100% - 30px);padding: 0 15px;background: #fff;height: 30px;line-height: 30px;">
			<view style="width: 40%;float: left;font-size: 14px;">
				<text style="color: #acacac;">筛选结果：</text>
				{{nowlst.length}}
			</view>
			<!-- <view style="width: 60%;float: left;text-align: right;font-size: 14px;" @tap="open1">
				<text style="color: #acacac;">排序方式：</text>
				{{inititems.name}}
				<image src="../../static/img/xiala.png" style="width: 14px;height: 12px;float: right;margin-left:8px;margin-top: 9px;" mode=""></image>
			</view> -->
		</view>
		<view style="margin-top: 80px;">
			<view class="list" style="padding: 0 15px;">
				<view class="lst-item border-bt" style="padding: 15px 0;overflow: hidden;" v-for="i,index in nowlst">
					<image  @tap="$go('/pages/echart/echart?obj='+JSON.stringify(i))" :src="i.headPortrait" style="width: 60px;float: left; height: 60px;border: 1px solid #acacac;margin-top: 6px;" mode=""></image>
					<view  @tap="$go('/pages/echart/echart?obj='+JSON.stringify(i))" class="lst-cen" style="float: left;font-size: 13px;margin-left: 10px;">
						<view class="" style="font-size: 16px;padding-bottom: 6px;font-weight: 650;">
							{{i.traderName}}
							
						</view>
						<view style="font-size: 13px;padding-bottom: 2px;">
							<text style="color: #acacac;display: inline-block;">跟随人数 <span style="color: #000000;padding-left: 5px;">{{i.followTotalNum}}</span></text>
						</view>
						<view class="" style="color: #acacac;padding-bottom: 2px;">
							适应金额
							<text style="color: #000000;padding-left: 5px;">{{i.maxPosMargin}}</text>
						</view>
						<view class="" style="color: #acacac;padding-bottom: 2px;">
							品种
							<text style="color: #000000;padding-left: 5px;">{{i.commodityNo?i.commodityNo:'--'}}</text>
						</view>
						<view style="color: #acacac;padding-bottom: 2px;">
							每日限仓手数
							<text style="color: #000000;padding-left: 5px;">{{i.limitDayOrders?i.limitDayOrders+'手':'不限'}}</text>
						</view>
						<!-- <view style="color: #acacac;padding-bottom: 2px;background: #f1f1f1;padding: 2px 5px;clear: both;float: left;margin-bottom: 3px;margin-top: 5px;">
							当前合约
							<text style="color: #000000;padding-left: 5px;">{{i.limitDayOrders?i.limitDayOrders+'手':'不限'}}</text>
						</view>
						<view style="color: #acacac;padding-bottom: 2px;background: #f1f1f1; clear: both;float: left;padding: 2px 5px;">
							当前盈亏
							<text style="color: #000000;padding-left: 5px;">{{i.limitDayOrders?i.limitDayOrders+'手':'不限'}}</text>
						</view> -->
					</view>
					<view class="lst-rig" style="float: right;text-align: right;">
						<span v-if="i.myFocusState==0" @tap="quxiao(i,1)" style="border: 1px solid #000;border-radius: 50%;margin-right: 3px; float: right;clear: both;margin-bottom: 2px; display: block;width: 30rpx;height: 30rpx;line-height: 30rpx;text-align: center;">+</span>
						<span v-else @tap="quxiao(i,0)" style="border: 1px solid #000;border-radius: 50%;margin-right: 3px; float: right;clear: both;margin-bottom: 2px; display: block;width: 30rpx;height: 30rpx;line-height: 30rpx;text-align: center;">-</span>
						<span style="display: block;clear: both;font-size: 12px;color: #acacac;">自选</span>
						
						<view style="overflow: hidden;clear: both;margin-top:32rpx;">
							<text style="display: block;float: right;clear: both;font-size: 14px;color: red;max-width: 200rpx;overflow: hidden;text-overflow: ellipsis;" :style="{color:i.profit>0?'red':'green'}">
							<!-- {{i.currencyCode}} -->
							
							<text style="color: #000;">{{i.currencySymbol}}</text>{{i.profit.toFixed(0)}}</text>
							<text style="display: block;float: right;clear: both;font-size: 14px;margin-top: 10rpx;">账户盈亏</text>
							
							<view class="" style="text-align: center;">
								<span v-if="i.dealerFollowState == 0" @tap="$go('/pages/echart/gensui?obj='+JSON.stringify(i),true)" style="display:block;margin-top: 42rpx; clear: both;font-size: 12px;padding: 2px 10px;background: #168deb;overflow: hidden;float: right;color: #fff;border-radius: 2px;">订阅</span>
								<span v-else @tap="$go('/pages/center/detail?uid='+i.traderUid)" style="display:block;margin-top: 42rpx; clear: both;font-size: 12px;padding: 2px 10px;background: #168deb;overflow: hidden;float: right;color: #fff;border-radius: 2px;">取消订阅</span>
								<text style="color: #ea7b4e;display: block;clear: both;font-size: 12px;text-align: right;padding-top: 10rpx;">{{i.subPoint}}积分/手</text>
							</view>
						</view>
					</view>
				</view>
				<uni-text v-if="!nowlst.length && load" style="height: 400x;font-size: 16px;text-align: center;display: block;color: red;padding-top: 150px;">
					暂无筛选信息！
					<!-- <navigator url="../center/setshi" style="color:#168deb ;display: inline-block;">去添加</navigator> -->
				</uni-text>
			</view>
		</view>
		<uni-popup type="bottom" ref="saixuan">
			<view class="saixuan" style="background: #fff; position: relative;">
				<view class="stop" style="position: fixed;top: 0;left: 0;width: calc(100% - 30px);background: #fff;z-index: 100;">
					筛选
					<button type="default" @tap="close" >确认</button>
					<button type="default" @tap="reset" style="margin-right:25px;color: red;">重置</button>
					
				</view>
				<view class="box" style="margin-top: 50px;">
					<view class="stitle">
						交易周期
						<text>
							{{slider1.rangeValue[0]}}~{{slider1.rangeValue[1]}}
						</text>
					</view>
					<view class="ssai">
						<slider-range
						  :value="slider1.rangeValue"
						  :min="slider1.min"
						  :max="slider1.max"
						  :step="slider1.step"
						  :bar-height="barHeight"
						  :block-size="blockSize"
						  block-color="#0081f0"
						  :decorationVisible="true"
						  active-color="#0081f0"
						  :background-color="backgroundColor"
						  :format="format1"
						  :tipVisible="false"
						  @change="handleRangeChange($event,'slider1')"
						></slider-range>
					</view>
				</view>
				
				<view class="box">
					<view class="stitle">
						收益率
						<text>
							{{slider2.rangeValue[0]}}%~{{slider2.rangeValue[1]}}%
						</text>
					</view>
					<view class="ssai">
						<slider-range
						  :value="slider2.rangeValue"
						  :min="slider2.min"
						  :max="slider2.max"
						  :step="slider2.step"
						  :bar-height="barHeight"
						  :block-size="blockSize"
						  block-color="#0081f0"
						  active-color="#0081f0"
						  :decorationVisible="true"
						  :background-color="backgroundColor"
						  :format="format1"
						  :tipVisible="false"
						  @change="handleRangeChange($event,'slider2')"
						></slider-range>
					</view>
				</view>
				
				<view class="box">
					<view class="stitle">
						盈亏金额
						<text>
							￥{{slider3.rangeValue[0]}}~￥{{slider3.rangeValue[1]}}
						</text>
					</view>
					<view class="ssai">
						<slider-range
						  :value="slider3.rangeValue"
						  :min="slider3.min"
						  :max="slider3.max"
						  :step="slider3.step"
						  :bar-height="barHeight"
						  :block-size="blockSize"
						  :decorationVisible="true"
						  block-color="#0081f0"
						  active-color="#0081f0"
						  :background-color="backgroundColor"
						  :format="format1"
						  :tipVisible="false"
						  @change="handleRangeChange($event,'slider3')"
						></slider-range>
					</view>
				</view>
				
				<view class="box">
					<view class="stitle">
						最大回撤
						<text>
							{{slider4.rangeValue[0]}}%~{{slider4.rangeValue[1]}}%
						</text>
					</view>
					<view class="ssai">
						<slider-range
						  :value="slider4.rangeValue"
						  :min="slider4.min"
						  :max="slider4.max"
						  :step="slider4.step"
						  :bar-height="barHeight"
						  :block-size="blockSize"
						  :decorationVisible="true"
						  block-color="#0081f0"
						  active-color="#0081f0"
						  :background-color="backgroundColor"
						  :format="format1"
						  :tipVisible="false"
						  @change="handleRangeChange($event,'slider4')"
						></slider-range>
					</view>
				</view>
				
				<view class="box">
					<view class="stitle">
						跟单人数
						<text>
							{{slider5.rangeValue[0]}}~{{slider5.rangeValue[1]}}
						</text>
					</view>
					<view class="ssai">
						<slider-range
						  :value="slider5.rangeValue"
						  :min="slider5.min"
						  :max="slider5.max"
						  :step="slider5.step"
						  :bar-height="barHeight"
						  :block-size="blockSize"
						  :decorationVisible="true"
						  block-color="#0081f0"
						  active-color="#0081f0"
						  :background-color="backgroundColor"
						  :format="format1"
						  :tipVisible="false"
						  @change="handleRangeChange($event,'slider5')"
						></slider-range>
					</view>
				</view>
				
				<view class="box">
					<view class="stitle">
						盈利能力
						<text>
							{{slider6.rangeValue[0]}}%~{{slider6.rangeValue[1]}}%
						</text>
					</view>
					<view class="ssai">
						<slider-range
						  :value="slider6.rangeValue"
						  :min="slider6.min"
						  :max="slider6.max"
						  :step="slider6.step"
						  :bar-height="barHeight"
						  :block-size="blockSize"
						  :decorationVisible="true"
						  block-color="#0081f0"
						  active-color="#0081f0"
						  :background-color="backgroundColor"
						  :format="format1"
						  :tipVisible="false"
						  @change="handleRangeChange($event,'slider6')"
						></slider-range>
					</view>
				</view>	
				
				<view class="box">
					<view class="stitle">
						风险评级
						<text>
							{{slider7.rangeValue[0]}}%~{{slider7.rangeValue[1]}}%
						</text>
					</view>
					<view class="ssai">
						<slider-range
						  :value="slider7.rangeValue"
						  :min="slider7.min"
						  :max="slider7.max"
						  :step="slider7.step"
						  :bar-height="barHeight"
						  :block-size="blockSize"
						  :decorationVisible="true"
						  block-color="#0081f0"
						  active-color="#0081f0"
						  :background-color="backgroundColor"
						  :format="format1"
						  :tipVisible="false"
						  @change="handleRangeChange($event,'slider7')"
						></slider-range>
					</view>
				</view>	
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="popupss">
			<view style="height: 250px;background: #fff;position: relative;" class="popups">
				<p class="poptop" style="border: 1px solid #E4E7ED;">
					<button type="default" style="color:#acacac;font-size: 14px;">
						请选择排序方式
					</button>
					<button style="color: red;"
						type="default"
						@tap="
							close1();
						"
					>
						取消
					</button>
				</p>
				<view class="uni-list toplst">
					<radio-group @change="radioChange($event,'inititems')" style="padding-left: 10px;height: 100%;">
						<label  style="display: block;overflow: hidden;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in inititems.lst" :key="item.value">
							<view style="float: left;margin-left: 10px;margin-right: 3px;">
								<radio :value="item.value" :checked="index === inititems.idx" />
							</view>
							<view style="float: left; font-size: 16px;margin-top:1px;">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SliderRange from '../../components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
	export default {
		components: {
		  SliderRange,
		},
		data() {
			return {
				load:false,
				barHeight: 3,
				blockSize:20,
				backgroundColor: '#ccc',
				slider1: {
				  min: 50,
				  max: 200,
				  step: 1,
				  rangeValue: [50, 200],
				},
				slider2: {
				  min: 0,
				  max: 100,
				  step: 1,
				  rangeValue: [0, 100],
				},
				slider3: {
				  min: 0,
				  max: 100,
				  step: 1,
				  rangeValue: [0, 100],
				},
				slider4: {
				  min: 0,
				  max: 100,
				  step: 1,
				  rangeValue: [0, 100],
				},
				slider5: {
				  min: 0,
				  max: 100,
				  step: 1,
				  rangeValue: [0, 100],
				},
				slider6: {
				  min: 0,
				  max: 100,
				  step: 1,
				  rangeValue: [0, 100],
				},
				slider7: {
				  min: 0,
				  max: 100,
				  step: 1,
				  rangeValue: [0, 100],
				},
				value:'',
				list:[],
				param: {
					price: 12000,
					page: 1,
					pageCount: 13,
					pagesize: 200000,
					f: 0, //品种
					cycleDayStart: 0, //周期 cycleDayStart
					cycleDayEnd: 365, //周期
					profitRateStart: 0, // 收益率 profitRateStart
					profitRateEnd: 1, // 收益率
					profitStart: -100000, //盈亏 profitStart
					profitEnd: 100000, //盈亏
					maxRetracementStart: 0, //回测 maxRetracementStart
					maxRetracementEnd: 1, //回测
					followTotalNumStart: 0, //人数
					followTotalNumEnd: 200, //人数
					earningscCefficientStart: 0, //盈利能力 earningscCefficientStart
					earningscCefficientEnd: 1, //盈利能力
					riskCoefficientStart: 0, //风险系数 riskCoefficientStart
					riskCoefficientEnd: 1 //风险系数
				},
				inititems: {
					lst:[
						{
							value:0,
							name:'收益率'
						},
						{
							value:1,
							name:'盈利能力'
						}
					],
					idx:0,
					name:'收益率'
				},
			
			}
		},
		computed:{
			nowlst(){
				var arr = [];
				for(var i in this.list){
					var o = this.list[i];
					if(o.traderName.indexOf(this.value) != -1){
						arr.push(o);
					}
				};
				return arr;
			}
		},
		methods: {
			radioChange(evt,name) {
				for (let i = 0; i < this[name].lst.length; i++) {
					if (this[name].lst[i].value === evt.detail.value) {
						this[name].idx = i;
						this[name].name = this[name].lst[i].name;
						break;
					}
				}
				this.close1()
			},
			cahgnw(e){
				this.value = e.value;
			},
			setsx(){
				// console.log(this.param)
				this.slider1.min = this.param.cycleDayStart;
				this.slider1.max = this.param.cycleDayEnd;
				
				this.slider2.min = this.param.profitRateStart;
				this.slider2.max = this.param.profitRateEnd;
				
				this.slider3.min = this.param.profitStart;
				this.slider3.max = this.param.profitEnd;
				
				this.slider4.min = this.param.maxRetracementStart;
				this.slider4.max = this.param.maxRetracementEnd;
				
				this.slider5.min = this.param.followTotalNumStart;
				this.slider5.max = this.param.followTotalNumEnd;
				
				this.slider6.min = this.param.earningscCefficientStart;
				this.slider6.max = this.param.earningscCefficientEnd;
				
				this.slider7.min = this.param.riskCoefficientStart;
				this.slider7.max = this.param.riskCoefficientEnd;
				
				
				this.reset();
			},
			getsx(){
				this.param.cycleDayStart = this.slider1.rangeValue[0];
				this.param.cycleDayEnd = this.slider1.rangeValue[1];
				
				this.param.profitRateStart = this.slider2.rangeValue[0];
				this.param.profitRateEnd = this.slider2.rangeValue[1];
				
				this.param.profitStart = this.slider3.rangeValue[0];
				this.param.profitEnd = this.slider3.rangeValue[1];
				
				this.param.maxRetracementStart = this.slider4.rangeValue[0];
				this.param.maxRetracementEnd = this.slider4.rangeValue[1];
				
				this.param.followTotalNumStart = this.slider5.rangeValue[0];
				this.param.followTotalNumEnd = this.slider5.rangeValue[1];
				
				this.param.earningscCefficientStart = this.slider6.rangeValue[0];
				this.param.earningscCefficientEnd = this.slider6.rangeValue[1];
				
				this.param.riskCoefficientStart = this.slider7.rangeValue[0];
				this.param.riskCoefficientEnd = this.slider7.rangeValue[1];
				
				this.getlist();
			},
			reset(){
				for(var i=1;i<8;i++){
					this['slider'+i].rangeValue = [this['slider'+i].min,this['slider'+i].max];
				}
			},
			format1(val) {
			  return val
			},
			handleRangeChange(e,obj) {
			  this[obj].rangeValue = e;
			  this.getsx();
			},
			open() {
				this.$refs.saixuan.open();
			},
			close() {
				this.$refs.saixuan.close();
			},
			open1() {
				this.$refs.popupss.open();
			},
			close1() {
				this.$refs.popupss.close();
			},
			quxiao(obj,id){
				if(!this.$store.state.user){
					uni.showToast({
						title: '请登录后重试！',
						icon: 'none',
						duration: 1500
						// position:'top'
					});
					return;
				}
					  var _this= this;
					  uni.request({
					  	url: _this.$store.state.url + '/api/shequuser/mycenter/addoreidtmyfocus?ftoken='+_this.$store.state.user.token+'&ftraderuid='+obj.traderUid+'&ftraderacc='+obj.traderName+'&fstate='+id,
					  	method: 'POST',
					  	// data: _this.param,
					  	
					  	success: res => {
					  		res = res.data;
					  		if (res.code == 200) {
					  			if(id == 1){
					  				uni.showToast({
					  					title: '已关注！',
					  					duration:2000
					  				});
									obj.myFocusState = 1;
					  			}else{
									obj.myFocusState = 0;
					  			}
					  		} else {
					  		}
					  	},
					  	fail: res => {
					  		console.log(res);
					  	}
					  });
			},
			getlist(){
				var _this = this;
				uni.request({
					method: 'get',
					url:_this.$store.state.user?_this.$store.state.url1 + '/api/GWDataShow/GetDataShowList?token=' + _this.$store.state.user.token : _this.$store.state.url1+'/api/GWDataShow/GetDataShowList',
					data: _this.param,
					success: function(data) {
						_this.load = true;
						data = data.data;
						if (data.code == 200) {
							_this.list = data.data.list;
							// console.log(_this.list)
						} else {
						}
					}
				});
			},
			getdata(){
				var _this = this;
				uni.request({
					method: 'get',
					url:_this.$store.state.url1 + '/api/GWDataShow/GetHomeRankingFilter',
					success: function(data) {
						data = data.data;
						if (data.code == 200) {
							_this.param = data.data;
							_this.setsx();
							_this.getlist();
						} else {
						}
					}
				});
				
			}
		},
		onShow() {
			var _this = this;
			uni.getNetworkType({
				success: function(res) {
					if (res.networkType == 'none') {
						uni.showToast({
							title: '当前无网络连接，请检查！',
							icon: 'none',
							duration: 5000
			
							// position:'top'
						});
					}
				}
			});
			uni.onNetworkStatusChange(function(res) {
				if (!res.isConnected) {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 3000
						// position:'top'
					});
				} else {
					uni.showToast({
						title: '网络已连接！',
						icon: 'none',
						duration: 3000
						// position:'top'
					});
					_this.getdata();
				}
			});
			_this.getdata();
		}
	}
</script>

<style scoped>
	.saixuan{
		height: 400px;
		overflow: auto;
	}
.stop{
	line-height: 40px;
	font-size: 18px;
	padding: 0 15px;
	font-weight: 600;
	border-bottom: 1px solid #f7f7f7;
}
.stop uni-button{
	float: right;
	line-height: 40px;	
	background: none;
	font-size: 16px;
	color: #0081f0;
	padding: 0;
}
.stop uni-button::after{
	border: 0;
}
.box{
}
.box {
	padding: 0 15px;
}
.stitle{
	margin-bottom: -20px;
	margin-top: 15px;
	font-size: 14px;
	padding: 0 5px;
}
.stitle uni-text{
	display: block;
	float: right;
}
.ssai{
	
}
.poptop {
	overflow: hidden;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
}
.toplst {
	height: 210px;
	overflow: scroll;
	position: absolute;
	top: 45px;
	width: 100%;
}
.poptop uni-button {
	float: left;
	line-height: unset;
	background: none;
	border: 0;
	padding: 10px 20px;
	font-size: 16px;
}
.poptop uni-button::after {
	border: 0;
}
.poptop uni-button:first-of-type {
	float: left;
	color: #666;
}
.poptop uni-button:last-of-type {
	float: right;
	color: rgb(0, 129, 240);
}
.uni-list-cell {
	justify-content: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid #e4e7ed;
	font-size: 14px;
}
</style>
